<template>
	<view class="new-address">
		<!-- 新增地址 -->
		<u-navbar leftIconSize="34rpx" autoBack :placeholder="true" bgColor="#ffffff">
			<view class="" slot="center">
				<text class="c-000 pf-sc fw-600" style="font-size:  rpx;">地址管理</text>
			</view>
		</u-navbar>
		<view
			class="set-data-container w-750 b-box d-flex flex-c ali-i-c just-sw bg-fa po-re"
			style="padding:20rpx 0 0;"
			:style="{ height: containerHeight }"
		>
			<view class="w-100 d-flex flex-c ali-i-c b-box">
				<view style="margin-bottom: 22rpx;padding: 0 36rpx;" class="b-box w-100 bg-ff">
					<view
						class="d-flex flex-r ali-i-c just-c b-box w-100 bg-ff"
						style="border-bottom: 2rpx solid #EEEEEE;height: 112rpx;"
					>
						<text
							class="pf-sc fw-400"
							style="font-size: 30rpx;color: rgba(0,0,0,0.9000);margin-right: 120rpx;"
						>
							姓名
						</text>
						<u-input
							border="none"
							v-model="name"
							placeholder="请填写姓名"
              placeholderStyle="color: #999999;fontWeight: 400;fontsize: 30px;fontfamily:PingFang SC-Regular, PingFang SC"
							:customStyle="{ color: 'rgba(0,0,0,0.9000)', font: '400 30rpx PingFang SC' }"
						></u-input>
					</view>
					<view
						class="d-flex flex-r ali-i-c just-c b-box w-100 bg-ff po-re"
						style="border-bottom: 2rpx solid #EEEEEE;height: 112rpx;"
					>
						<text
							class="pf-sc fw-400"
							style="font-size: 30rpx;color: rgba(0,0,0,0.9000);margin-right: 88rpx;"
						>
							手机号
						</text>
						<u-input
							border="none"
							v-model="phone"
							placeholder="请填写手机号"
							placeholderStyle="color: #999999;fontWeight: 400;fontsize: 30px;fontfamily:PingFang SC-Regular, PingFang SC"
							:customStyle="{ color: 'rgba(0,0,0,0.9000)', font: '400 30rpx PingFang SC' }"
						></u-input>
					</view>
					<view
						class="d-flex flex-r ali-i-c just-c b-box w-100 bg-ff po-re"
						style="border-bottom: 2rpx solid #EEEEEE;height: 112rpx;"
					>
						<text
							class="pf-sc fw-400"
							style="font-size: 30rpx;color: rgba(0,0,0,0.9000);margin-right: 54rpx;"
						>
							所在地区
						</text>
						<pick-regions
							style="width:500rpx;"
							:defaultRegion="defaultRegionCode"
							@getRegion="handleGetRegion"
						>
							<text
								style="display: inline-block;margin-top:6rpx;width:690rpx; font:400 30rpx PingFang SC;color:#999999;padding:5rpx 0 10rpx;"
								:class="{ cc: showAddress }"
							>
								{{ showAddress || '请选择收货地区(省/市/区/县)' }}
							</text>
						</pick-regions>
						<image
							:src="require('../static/rightc.png')"
							style="width: 15rpx;height: 26rpx;right: 0;top:40%"
							class="po-ab"
						></image>
					</view>
					<view class="d-flex flex-r ali-i-s just-s b-box w-100 bg-ff" style="">
						<text
							class="pf-sc fw-400"
							style="font-size: 30rpx;color: rgba(0,0,0,0.9000);margin-right: 24rpx;margin-top: 36rpx;"
						>
							详细地址
						</text>
						<u-textarea
							border="none"
							v-model="address0"
							placeholder="街道、楼牌号等"
							height="214rpx"
              placeholderStyle="color: #999999;fontWeight: 400;fontsize: 30px;fontfamily:PingFang SC-Regular, PingFang SC"
							:customStyle="{ padding: '36rpx', backgroundColor: '#ffffff' }" 
						></u-textarea>
					</view>
				</view>
				<!--  -->
				<view
					class="d-flex flex-r ali-i-c just-sw b-box w-100 bg-ff"
					style="height: 112rpx;margin-bottom: 60rpx;padding: 0 36rpx;"
				>
					<text
						class="pf-sc fw-400"
						style="font-size: 30rpx;color: rgba(0,0,0,0.9000);margin-right: 24rpx;"
					>
						设为默认地址
					</text>
					<u-switch
						v-model="isDefault"
						@change="AddressDefaultChange(isDefault)"
						size="44"
						activeColor="#2AC128"
					></u-switch>
				</view>
			</view>
			<!-- btn -->
			<view
				style="height: 206rpx;margin-bottom: 84rpx;"
				class="w-100 b-box d-flex flex-c ali-i-c just-sw"
			>
				<u-button
					:throttleTime="700"
					@click="SaveAddressInfo"
					:customStyle="{
						height: '88rpx',
						width: '670rpx',
						font: '500 32rpx PingFang SC',
						color: '#ffffff',
						borderWidth: '0rpx',
						background: 'linear-gradient(180deg, #4885C5 0%, #3B52A6 100%)',
						borderRadius: '44rpx'
					}"
					shape="square"
					text="保存"
				></u-button>
			</view>
		</view>
	</view>
</template>

<script>
import {address} from '@/common/api.js';
import { _containerHeight } from '@/utils/GetSys.js';
import pickRegions from '../components/pick-regions/pick-regions';
import Unavbar from '../components/uview-ui/components/u-navbar/u-navbar';
import Ubutton from '../components/uview-ui/components/u-button/u-button';
import uSwitch from '../components/uview-ui/components/u-switch/u-switch';
import uInput from '../components/uview-ui/components/u-input/u-input';
import uTextarea from '../components/uview-ui/components/u-textarea/u-textarea';
export default {
	components: {
		'u-navbar': Unavbar,
		'u-button': Ubutton,
		'u-switch': uSwitch,
		'u-input': uInput,
		'u-textarea': uTextarea,
		'pick-regions': pickRegions
	},
	data() {
		return {
			containerHeight: '',
			isDefault: false,
			//////////////地址选择器/////////////
			region: [],
			defaultRegion: ['河南省', '郑州市', '中原区'],
			defaultRegionCode: '410102',
			showAddress: '',
			name:'',
			phone:'',
			address0:''
			//////////////地址选择器/////////////
		};
	},
	methods: {
		// 获取选择的地区
		handleGetRegion(region) {
			this.region = region;
			this.showAddress = `${region[0].name}/${region[1].name}/${region[2].name}`;
		},

		SaveAddressInfo() {
			//保存
			//先验证  在请求
			if (this.name == '') {
				uni.showToast({
					title: '请输入姓名',
					icon: 'error'
				});
				return;
			}
			//验证手机号不能为空
			if (this.phone == '') {
				uni.showToast({
					title: '请输入手机号',
					icon: 'error'
				});
				return;
			}
			//验证合法的手机号
			let reg = /^1[3-8]\d{9}$/;
			if (!reg.test(this.phone)) {
				uni.showToast({
					title: '请输入合法的手机号',
					icon: 'error'
				});
				return;
			}
			//验证地区不能为空
			if (this.showAddress == '') {
				uni.showToast({
					title: '请选择地区',
					icon: 'error'
				});
				return;
			}
			//验证详细的地址
			if (this.address0 == '') {
				uni.showToast({
					title: '请填写详细的地址信息',
					icon: 'error'
				});
				return;
			}
			
			
			
			let params = {
				token: uni.getStorageSync('usertoken'),
				type: 1,
				name: this.name,
				mobile: this.phone,
				location: this.showAddress,
				address: this.address0,
				is_default: this.isDefault ? 1 : 0,
			};
			address(params).then((res)=>{
				if (res.data.code === 1) {
				   uni.navigateTo({
				   	url:'/userModelA/userB/AddressList/AddressList'
				   })
				}
			})
			// uni.navigateBack({
			// 	delta: 1
			// });
		},
		AddressDefaultChange(e) {
			//是否设置为默认地址
			this.isDefault=e
			console.log(this.isDefault,'哈哈哈');
		}
	},
	onLoad() {
		this.containerHeight = _containerHeight();
	}
};
</script>

<style lang="scss">
.new-address {
	.cc {
		color: #000000;
	}
}
</style>
